ДВХ спасет мир

ДВХ спасет мир

Да, да, я конечно не о Data Warehouse, а о классных единицах измерения в вебе. Вы стопудово используете такие штуки как vh, vw — проценты от размера вьюпорта. И с ними всегда какая-то запара, то скролл вылезет где не надо, то контент не влезает или закрывается адресной строкой. Почему нельзя сделать нормально? Можно!

Возьмем простой советский -webkit-fill-available... Стоп! Нет, конечно!

Просто заменим vh на dvh и получим процент не от вьюпорта в идеальных условиях, а от реального видимого пользователем экрана. Если там вылезло все что могло вылезти — размер будет меньше, если пользователь поскроллил и адресная строка освободила место для контента — размер будет побольше.

Если нужно основательно завязаться независимо от состояния браузера, то можно использовать lvh — где l от слова large (большой) или svh — где s от слова small. Эти единицы измерения динамически меняться не будут.

Попробуйте, если верстаете под мобилки. Поддерживается во всех браузерах.

Подпишись, тут не только про код